<template>
  <div class="file-previews-container" v-if="files.length > 0">
    <div class="file-preview" v-for="file in files" :key="file.id">
      <div class="file-info">
        <i class="bi bi-file-earmark"></i>
        <span class="file-name">{{ file.name }}</span>
        <span class="file-size">({{ formatFileSize(file.size) }})</span>
        <span class="uploading-indicator" v-if="file.uploading">
          <span class="spinner-border spinner-border-sm" role="status"></span>
          上传中...
        </span>
      </div>
      <button class="remove-file" @click="removeFile(file.id)" title="移除文件">
        <i class="bi bi-x"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  files: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['remove'])

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const removeFile = (fileId) => {
  emit('remove', fileId)
}
</script>

<style scoped>
.file-previews-container {
  padding: 10px 20px;
  background-color: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 8px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  color: var(--text-primary);
}

.file-size {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.uploading-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.remove-file {
  background: none;
  border: none;
  color: var(--danger-color);
  cursor: pointer;
  padding: 4px;
}

.remove-file:hover {
  opacity: 0.8;
}
</style> 